cascading style sheets reference

contents | introduction | what | why | cascade | how | statements | selectors | properties | integration | values | printing | media | font specification | generated content | advanced

Media Types and CSS

The assumption underlying CSS1 was that web pages were to be viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media have their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside the same style sheet you can have different parts for printing, handheld devices, monitors and so on. In this section we will take a look at how this works.

The @media rule

The @media rule is a subset of a style sheet that is specific to a particular type of medium, or group of media.

An @media rule specifies the medium or media to which it applies, then contains a number of statements, exactly like the statements we usually find in a style sheet. These statements apply only when a web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They comprise

• the keyword @media
• a list of media types, separated by commas
• the statements to be applied to this group of media, contained inside curly braces "{" "}"

These statements are identical to the statements we have seen in previous sections.

For example, the following rule applies a white background and black text color to the body of page when it is being printed or when it is being displayed on a hand held device.

@media print, handheld {
background: white;
color: black
}

Types of Media

CSS2 provides for the following media types, as described in the recommendation

• all Suitable for all devices.
• aural Intended for speech synthesizers.
• braille Intended for braille tactile feedback devices.
• embossed Intended for paged braille printers.
• handheld Intended for handheld devices (small screen, monochrome, limited bandwidth).
• print Intended for paged, opaque material and for documents viewed on screen in print preview mode.
• projection Intended for projected presentations, for example projectors or print to transparencies.
• screen Intended primarily for color computer screens.
• tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
• tv Intended for television-type devices (low resolution, color, limited scrollability).

Media specific importing

In addition to the media rule, CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For instance, to import a style sheet called monochrome.css when a page is to be printed or displayed on a handheld device you would create the following @import rule.

@import url(monochrome.css) print, handheld

For more on @import rules, see the section of on types of rules in CSS.

Next

Continuing with the new features of CSS2, next we look at "WebFonts" in CSS2.